<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title> </title>

	<link rel="stylesheet" href="css/common.css">
	<!-- <link rel="stylesheet" href="css/kline.css"> -->

</head>
<style>
	[v-cloak] {
		display: none !important;
	}
</style>

<body>
	<!-- <div class="h20 bgWhiteBlack"></div> -->
	<div id="app" :class="[{'dark':theme == 'dark'}]" v-cloak>
		<div :class="['header plr15 flex alcenter bgWhite  fixed pt30',{'bgPart':theme == 'dark'}]">
			<img :src="theme == 'dark'?'../../static/image_dark/ward.png':'../../static/image/ward.png'"
				class="h15 wt15 mr20" @click="goback">
			<div :class="['ft14 bold gray3',{'drakColor':theme == 'dark'}]">{{symbol}}</div>
		</div>
		<div>
			<div :class="['pt60 pb10 plr20  bgWhite',{'bgPart':theme == 'dark'}]" style="min-height: 50px;">
				<div class="flex alcenter between">
					<div class="" :class="[updown.substring(0,1) == '-'?'green':'red']">
						<p :class="['bold ft24',{'drakColor':theme == 'dark'}]">
						<p class="mt1021">{{newprice || '0.00'}}</p>
						</p>
						<p :class="['mt10',{'drakColor':theme == 'dark'}]" class="mt10 mt1020">
						<p class="mt1020"><span class="mt1020"></span>{{translatedInfo.volume}} {{dayvom ||'0.00'}}
							<!-- <span class="mt1020">24H 量 {{dayvom ||'0.00'}} <span class="mt1020"></span> --></span>
						</p>
						</p>
						<div style="height:5px;"></div>
						<span class="mt1020">{{translatedInfo.reNum}} {{updown ||'0.00'}}% <span v-if="false"
								:class="['btat',{'blue5':current==1,'blue6':current==0}]"> ≈ {{usdtValue}} CNY</span>

					</div>

					<div class="w50">

						<img :src="theme == 'dark'?'../../static/image/heisi.png':'../../static/image/heisi.png'"
							class="th15 twt15 mr20">

						<img :src="theme == 'dark'?'../../static/image/sousa.png':'../../static/image/sousa.png'"
							class="tth15 ttwt15 mr20">

						<img :src="theme == 'dark'?'../../static/image/share.png':'../../static/image/share.png'"
							class="th15 twt15 mr20">

						<div style="height:16px;"></div>
						<div class="flex between mb5">
							<span :class="['blue',{'drakColor':theme == 'dark'}]">{{translatedInfo.high || '--'}}</span>
							<span :class="['blue',{'drakColor mt1025':theme == 'dark'}]">{{maxprice || '0.00'}}</span>
						</div>

						<div class="flex between mb5">
							<span :class="['blue',{'drakColor ':theme == 'dark'}]">{{translatedInfo.low || '--'}}</span>
							<span :class="['blue',{'drakColor mt1025':theme == 'dark'}]">{{minprice ||'0.00'}}</span>
						</div>
					<!-- 	<div class="flex between">
								<span :class="['blue',{'drakColor':theme == 'dark'}]">{{translatedInfo.volume || '--'}}</span>
								<span :class="['blue',{'drakColor':theme == 'dark'}]"></span>
							</div> -->
					</div>
				</div>
			</div>
			<div id="tv_chart_container" :class="[{'bgPart':theme == 'dark'}]"
				style="width:100%;height:60vh;padding-top: 5px;"></div>
			<div :class="['mt5 pb100  bgWhite',{'bgPart':theme == 'dark'}]" style="margin: 0;padding-top: 5px;">
				<div class="plr10">
					<!--合约交易，币币交易-->
					<div class="ptb10 bdb_blue35 ft16 plr102 bold flex alcenter" style="font-weight: 700;">
						<div :class="['ft16 btat',{'blue4':current==1,'blue3':current==0}]" @click="changeBang(1)">
							{{translatedInfo.deep}}
						</div>
						<div :class="['ft16 btat ml20',{'blue4':current==0,'blue3':current==1}]" @click="changeBang(0)">
							{{translatedInfo.real}}
						</div>
					</div>
				</div>
				<!-- 实时成交 -->
				<div class="plr10" v-show="current==0">
					<div class="flex alcenter ptb5 ft12 blue">
						<div :class="['flex1',{'drakColor':theme == 'dark'}]">{{translatedInfo.time || '--'}}</div>
						<div :class="['flex1 tc',{'drakColor':theme == 'dark'}]">{{translatedInfo.price || '--'}}
						</div>
						<div :class="['flex1 tr',{'drakColor':theme == 'dark'}]">{{translatedInfo.num || '--'}}
						</div>
					</div>
					<div class="">
						<div class="flex alcenter ptb5" :class="[item.direction=='sell'?'green':'red']"
							v-for="(item,i) in realList" :key="i">
							<div class="flex1">{{item.ts | dateFormat}}</div>
							<div class="flex1 tc">{{Number(item.price).toFixed(2)}}</div>
							<div class="flex1 tr">{{Number(item.amount).toFixed(4)}}</div>
						</div>
					</div>
				</div>
				<!-- 深度 -->
				<div class="plr10" v-show="current==1">

					<div class="flex alcenter ptb5 ft12 blue">
						<div :class="['flex1',{'drakColor':theme == 'dark'}]">{{translatedInfo.buy || '--'}}</div>
						<div :class="['flex1',{'drakColor':theme == 'dark'}]">{{translatedInfo.num || '--'}}</div>
						<div :class="['flex1 ',{'drakColor':theme == 'dark'}]">
							{{translatedInfo.price+'(USDT)' || '--'}}
						</div>
						<div :class="['flex1 tc',{'drakColor':theme == 'dark'}]">{{translatedInfo.num || '--'}}
						</div>
						<div :class="['flex1 tr',{'drakColor':theme == 'dark'}]">{{translatedInfo.sell || '--'}}
						</div>
					</div>
					<div class="">
						<div class="flex alcenter ptb5" style='position: relative;' v-for="(item,i) of bids" :key="i">
							<div :class="['flex1',{'drakColor':theme == 'dark'}]">
								<div class="flex1 bfz3 ">{{i+1}}</div>
								<div class="flex1 bfz3 tc ">{{Number(item[1]).toFixed(4)}}</div>
								<div class="flex1 bfz3 tr red">{{Number(item[0]).toFixed(2)}}</div>
								<div class="percenttd" style=''>
									<span class="percentDiv"
										:style="'width:'+((item[1]/buyMax)*100)+'%;background-color:#f75b0d;'"></span>
								</div>
							</div>
							<div :class="['flex1',{'drakColor':theme == 'dark'}]">
								<div class="percenttd" style="left:50%;text-align: left;justify-content:flex-end;"
									:style="'width:'+(asks[i][1]/sellMax*50)+'%;'">
									<span class="percentDiv" style="width:100%;background-color:#00ff9b;"></span>
								</div>
								<div class="bfz3 green">{{Number(asks[i][0]).toFixed(2)}}</div>
								<div class="bfz3 tc ">{{Number(asks[i][1]).toFixed(4)}}</div>
								<div class="bfz3 tr ">{{i+1}}</div>
							</div>

						</div>
						<!-- <div class="flex ptb5" style="width: 50%;float: left;" v-for="(item,i) of asks" :key="i" >
							<div class="flex1 green">
								<div class="bfz3 ">{{Number(item[0]).toFixed(2)}}</div>
								<div class="bfz3 tc ">{{Number(item[1]).toFixed(4)}}</div>
								<div class="bfz3 tr ">{{i+1}}</div>
							</div>
					</div> -->
					</div>
				</div>
			</div>
			<div :class="[' flex between plr20 alcenter plr20 bgWhite fixed w100 pos_l0b0',{'bgPart':theme == 'dark'}]"
				style="height: 80px;">
				<button class="goTranbuy bgGreen flex1 ptb10 mr20 white radius4" @click="goback">{{translatedInfo.buy ||
					'--'}}</button>
				<button class="goTransell bgRed flex1 ptb10 white radius4" @click="goback">{{translatedInfo.sell ||
					'--'}}</button>
				<!--div id="" class="flex alcenter">
                <img src="../../static/image/collect.png" class='h30 wt30' id="noCollct" v-if="!hasCollcet" @click="triggerCollcet(true)">
                <img src="../../static/image/collect3.png" class='h30 wt30'  id="hasCollct" @click="triggerCollcet(false)" v-else >
                <span :class="['pr5',{'drakColor':theme == 'dark'}]" v-if="!hasCollcet">{{translatedInfo.myadd || '--'}}</span>
                <span :class="['pr5',{'drakColor':theme == 'dark'}]" v-else>{{translatedInfo.ceil || '--'}}</span>
            </div-->
			</div>
		</div>
	</div>
	<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js">
	</script>
	<script src="lib/vue.min.js"></script>
	<script src="lib/jquery.js"></script>
	<!-- <script src="javascripts/jquery.cookie.js"></script> -->
	<script src="lib/layer_mobile/layer.js"></script>
	<script src="javascripts/main.js"></script>
	<script src="javascripts/socket.io.js"></script>
	<script src="tradeview/charting_library/charting_library.min.js"></script>
	<script>
		document.addEventListener('UniAppJSBridgeReady', function () {
			var vm = new Vue({
				el: '#app',
				data: {
					option: '',
					usdtValue: '',
					usdtRate: '0.14492753',
					sellMax: 0,
					buyMax: 0,
					current: 0,
					resolutionStr: '',
					getCompleteList: null,
					getCompleteList2: null,
					getCompleteList3: null,
					widget: null,
					symbolInfo: null,
					feed: null,
					wsEx: null,
					ws: null,
					lists: [],
					timeId: '',
					newData: '',
					symbol: '',
					priceScale: 100000,
					histime: '',
					newprice: '0.00',
					updown: '0.00',
					maxprice: '0.00',
					minprice: '0.00',
					dayvom: '0.00',
					currencyList: [],
					realList: [], //实时数据
					couponSelected: '',
					legal_id: '',
					currency_id: '',
					legal_name: '',
					currency_name: '',
					hasCollcet: 0,
					myid: '',
					balance: '',
					rates: '',
					complete: [], //深度数据
					transwords: {
						zh: {
							high: '最 高',
							low: '最 低',
							volume: '24 H',
							num: '数量',
							price: '价格',
							time: '时间',
							buy: '买入',
							sell: '卖出',
							myadd: '自选',
							ceil: '取消',
							deep: '成交深度',
							real: '实时交易',
							reNum: '涨幅',
							line: '分时',
							k1m: '1分钟',
							k5m: '5分钟',
							k15m: '15分钟',
							k30m: '30分钟',
							k1h: '1小时',
							k1d: '1天',
						},
						en: {
							high: 'high',
							low: 'low',
							volume: '24H volume',
							num: 'number',
							price: 'price',
							time: 'time',
							buy: 'buy',
							sell: 'sell',
							myadd: 'Optional',
							ceil: 'cancel',
							deep: 'Depth',
							real: 'RealTransaction',
							reNum: 'Increase',
							line: 'Line',
							k1m: '1m',
							k5m: '5m',
							k15m: '15m',
							k30m: '30m',
							k1h: '1h',
							k1d: '1d',
						},
						hk: {
							high: '高',
							low: '低',
							volume: '24H量',
							num: '數量',
							price: '價格',
							time: '時間',
							buy: '買入',
							sell: '賣出',
							myadd: '自選',
							ceil: '取消',
							deep: '成交深度',
							real: '實時交易',
							reNum: '漲幅',
							line: 'Line',
							k1m: '1m',
							k5m: '5m',
							k15m: '15m',
							k30m: '30m',
							k1h: '1h',
							k1d: '1d',
						},
						jp: {
							high: '高さ',
							low: '低い',
							volume: '24 h量',
							num: '数',
							price: '価格',
							time: '時間',
							buy: '購入',
							sell: '売却',
							myadd: '自選する',
							ceil: 'キャンセル',
							deep: '取引の深さ',
							real: 'リアルタイム成約',
							reNum: '上げ幅',
							line: 'Line',
							k1m: '1m',
							k5m: '5m',
							k15m: '15m',
							k30m: '30m',
							k1h: '1h',
							k1d: '1d',
						},
						hy: {
							high: '가장 높다',
							low: '가장 낮다',
							volume: '24h재다',
							num: '수량',
							price: '가격.',
							time: '타임',
							buy: '매입',
							sell: '팔다',
							myadd: '선택하다',
							ceil: '취소',
							deep: '거래 깊이',
							real: '실시간 거래',
							reNum: '상승폭',
							line: 'Line',
							k1m: '1m',
							k5m: '5m',
							k15m: '15m',
							k30m: '30m',
							k1h: '1h',
							k1d: '1d',
						},
						ab: {
							high: "الأعلى",
							low: "الأدنى",
							المجلد: " حجم التداول( 24 ساعة)",
							num: "عدد",
							price: "السعر",
							time: "الوقت",
							buy: "شراء",
							sell: "بيع",
							myadd: "قائمتي",
							ceil: "إلغاء",
							deep: " عمق السوق",
							real: " تداول في الوقت الحقيقي",
							reNum: " النسبة المئوية للارتفاع",
							line: "Line",
							k1m: '1m',
							k5m: '5m',
							k15m: '15m',
							k30m: '30m',
							k1h: '1h',
							k1d: '1d',
						}
					},
					translatedInfo: {},
					bids: [],
					asks: [],
					lang: '',
					theme: "dark",
					//theme: "",
					type: 0,
				},
				filters: {
					dateFormat: function (tick) {
						var data = new Date(Number(tick));
						var h = data.getHours() < 10 ? "0" + data.getHours() : data.getHours();
						var m = data.getMinutes() < 10 ? "0" + data.getMinutes() : data.getMinutes();
						var s = data.getSeconds() < 10 ? '0' + data.getSeconds() : data.getSeconds();
						return h + ":" + m + ":" + s;
					},
				},
				created() {
					var that = this;
					console.log(999,that.translatedInfo)
					// that.lang = plus.storage.getItem('lang') || 'zh';
					//that.lang = 'zh';
					// localStorage.getItem('theme') || 'dark'
					// #ifdef APP-PLUS
					// 注释
					// that.theme = plus.storage.getItem('theme') || 'dark';
					// 注释这一行解决电脑没有 plus 内核 无法显示 K线 页面
					// K线 页面修改设计好，再去掉这个注释，否则手机只有默认暗夜色，没法使用 黑白双肤色
					//that.theme = plus.storage.getItem('theme') || 'dark';
					// #endif
					var paramsed = get_all_params();
					that.theme = paramsed.theme || 'dark';
					that.symbol = paramsed.symbol || 'btc';
					that.lang = paramsed.lang || 'zh';
					that.type = paramsed.type;
					that.option = paramsed.option;
					console.log("option", that.option);
					let c_name = paramsed.symbol.split('/');
					that.legal_name = c_name[1];
					that.currency_name = c_name[0];
					// that.legal_id=paramsed.legal_id;
					// that.currency_id=paramsed.currency_id;
					that.hasCollcet = paramsed.collected - 0;
					that.translatedInfo = that.transwords[that.lang];
					// document.getElementById('mytitle').innerText='123';
					// document.title = '123' ;
					document.title = that.symbol;
					that.getCompleteList = setInterval(function () {
						that.getComplete();
					}, 2000);
					that.getCompleteList3 = setInterval(function () {
						that.getRealList();
					}, 2000);
					// uni.setNavigationBarColor({
					// 			frontColor: '#ffffff',
					// backgroundColor: '#ff0000',})
					// plus.navigator.setStatusBarStyle('black');
					// plus.navigator.setStatusBarBackground('#FFFFFF');
				},
				computed: {
					listenState() { //监听交易对
						return this.symbol;
					}
				},
				watch: {
					listenState: function (a, b) { //监听交易对
						if (a != b && b != '') {
							this.widget.setSymbol(a, localStorage.getItem('tim'),
								function onReadyCallback() { }); //切换币种
						}
					}
				},
				mounted() {
					//画图
					//this.theme = 'dark'
					// #ifndef H5
					//#endif        
					this.createWidget();
					//this.getComplete();
				},
				destroyed() {
					this.removeWidget();
				},

				beforeDestroy() {
					clearInterval(this.getCompleteList);
					clearInterval(this.getCompleteList2);
					clearInterval(this.getCompleteList3);
				},
				methods: {
					changeBang(type) {
						if (this.current == type) {
							return;
						}
						this.current = type;
						//this.getMkar(type)
					},
					goback() {
						uni.navigateBack({
							delta: 1
						});

					},
					goback2() {
						if (this.option == 'option') {
							uni.navigateBack({
								delta: 1
							});
						} else
							if (this.type == 0) {
								uni.switchTab({
									url: '/pages/trade/trade'
								});
							} else if (this.type == 1) {
								uni.switchTab({
									url: '/pages/lever/lever'
								});
							} else {
								uni.navigateBack({
									delta: 1
								});
							}
					},
					// 跳转币币交易 ok
					goTrade(mytype) {
						let localData = {
							symbol: this.symbol,
							// legal_id:this.legal_id,
							// currency_name:this.currency_name,
							// currency_id:this.currency_id,
						};
						localStorage.setItem('tradeData', JSON.stringify(localData));
						localStorage.setItem('tradeType', mytype);
						uni.navigateTo({
							url: '/pages/trade/web-trade?symbol=' + this.symbol
						});
					},

					// 全站交易 深度ok
					getComplete() {
						var that = this;
						that.$nextTick(async () => {
							initData({
								url: 'common/tradeList',
								data: {
									symbol: that.symbol,
									type: that.type
								},
								type: 'post'
							}, res => {
								var bids = res.bids.slice(0, 20); //买
								var asks = res.asks.slice(0, 20); //卖
								this.bids = bids;
								this.asks = asks;
								bids.sort(function (x, y) {
									return y[1] - x[1];
								});

								that.buyMax = bids[0][1];
								asks.sort(function (x, y) {
									return y[1] - x[1];
								});

								that.sellMax = asks[0][1];
								//that.complete=res.slice(0,30)
								// that.newprice = Number(res[0].price).toFixed(6)
							});
						});
					},
					// 全站交易 交易数据
					getRealList() {
						var that = this;
						that.$nextTick(async () => {
							initData({
								url: 'common/realList',
								data: {
									symbol: that.symbol,
									type: that.type
								},
								type: 'post'
							}, res => {
								//var bids = res.bids.slice(0,10)//买
								//var asks = res.asks.slice(0,10)//卖
								that.realList = res.slice(0, 30);
								// that.newprice = Number(res[0].price).toFixed(6)
							});
						});
					},
					// 自选
					triggerCollcet(e) {
						initDataToken({
							url: 'user/addzixuan',
							data: {
								currency_id: this.currency_id,
								legal_id: this.legal_id
							},
							type: 'POST'
						}, (res) => {
							if (this.hasCollcet) {
								layer_msg('取消自选' + res);
							} else {
								layer_msg('加入自选' + res);
							}
							this.hasCollcet = !this.hasCollcet;
						});
					},
					// 默认
					connect(real) { //封装推送数据
						var that = this;
						initData({
							url: 'common/kline',
							data: {
								symbol: that.symbol,
								// type: that.type,
								type:0,
								period: that.resolutionStr,
								size: 1
							},
							type: 'post'
						}, res => {
							if (res.length > 0) {
								if (that.type == '1') {
									res.reverse();
								}
								var item = res[res.length - 1];
								item.open = Number(item.open);
								item.close = Number(item.close);
								item.high = Number(item.high);
								item.low = Number(item.low);
								// item.reNum = Number(translatedInfo.high) - mber(translatedInfo.low);
								if (item.vol == 0) {
									item.volume = Number(item.amount);
								} else {
									item.volume = Number(item.vol);
								}

								item.time = (Number(item.id) * 1000),
									//dateFormat.format(item.time)

									that.newprice = item.close - 0;

								that.updown = ((item.close - item.open) / (item.close - 0) * 100)
									.toFixed(4).toString();
								that.usdtValue = (Number(that.newprice) / Number(that.usdtRate)).toFixed(5);
								real(item);
							}
						});


					},
					createWidget() {
						let _this = this;
						this.$nextTick(function () {
							let widget = _this.widget = new TradingView.widget({
								symbol: _this.symbol,
								interval: 1,
								debug: true,
								fullscreen: false,
								autosize: true,
								container_id: "tv_chart_container",
								datafeed: _this.createFeed(),
								library_path: "tradeview/charting_library/",
								custom_css_url: this.theme == 'dark' ?
									'bundles/new_dark.css' : 'bundles/new.css',
								locale: _this.lang,
								width: "100%",
								height: 516,
								drawings_access: {
									type: 'black',
									tools: [{
										name: "Regression Trend"
									}]
								},
								disabled_features: [ //  禁用的功能
									'left_toolbar', 'widget_logo', 'header_saveload',
									'compare_symbol', 'display_market_status',
									'go_to_date', 'header_chart_type', 'header_compare',
									'header_interval_dialog_button',
									'header_resolutions', 'header_screenshot',
									'header_symbol_search', 'header_undo_redo',
									'use_localstorage_for_settings',
									// 'legend_context_menu',
									// 'show_hide_button_in_legend', //高低开 加上币种名称
									// 'show_interval_dialog_on_key_press', //高低开 加上币种名称
									// 'snapshot_trading_drawings', 'symbol_info',
									'timeframes_toolbar',
									'use_localstorage_for_settings', //底部K线高亮凸起
									'volume_force_overlay'
								],
								enabled_features: [ //  启用的功能（备注：disable_resolution_rebuild 功能用于控制当时间范围为1个月时，日期刻度是否都是每个月1号
									'dont_show_boolean_study_arguments',
									'hide_last_na_study_output',
									'move_logo_to_main_pane',
									'same_data_requery',
									'side_toolbar_in_fullscreen_mode',
									'disable_resolution_rebuild'
								],
								charts_storage_url: 'http://saveload.tradingview.com',
								charts_storage_api_version: "1.1",
								toolbar_bg: "transparent",
								timezone: "Asia/Shanghai",
								studies_overrides: {
									'volume.precision': '1000'
								},
								hideideas: false,
								hidevolume: false,
								LoadingScreenOptions: {
									foregroundColor: _this.theme == 'dark' ?
										"#162633!important" : "#fff!important",
									backgroundColor: _this.theme == 'dark' ?
										"#162633!important" : "#fff!important",
								},
								overrides: _this.overrides()
							});

							widget.MAStudies = [];
							widget.selectedIntervalButton = null;
							// widget.setLanguage('en')
							widget.onChartReady(function () { //图表方法
								// document.getElementById('trade-view').childNodes[0].setAttribute('style', 'display:block;width:100%;height:100%;');
								//let that =this

								widget.chart().createStudy('Moving Average', false, true, [
									15, 'close', 0
								], null, {
									'Plot.color': '#e843da'
								});
								widget.chart().createStudy("MA Cross", false, false, [10,
									20
								]);

								let buttonArr = [{
									value: "1min",
									period: "1",
									text: _this.translatedInfo['line'],
									chartType: 3,
									type: "1min"
								},
								{
									value: "1",
									period: "1m",
									text: _this.translatedInfo['k1m'],
									chartType: 1,
									type: "1min"
								},
								{
									value: "5",
									period: "5m",
									text: _this.translatedInfo['k5m'],
									chartType: 1,
									type: "5min"
								},
								{
									value: "15",
									period: "15m",
									text: _this.translatedInfo['k15m'],
									chartType: 1,
									type: "15min"
								},
								{
									value: "30",
									period: "30m",
									text: _this.translatedInfo['k30m'],
									chartType: 1,
									type: "30min"
								},
								{
									value: "60",
									period: "60分钟",
									text: _this.translatedInfo['k1h'],
									chartType: 1,
									type: "60min"
								},
								{
									value: "1D",
									period: "1D",
									text: _this.translatedInfo['k1d'],
									chartType: 1,
									type: "1day"
								},
									// {
									// 	value: "1W",
									// 	period: "1W",
									// 	text: "1周",
									// 	chartType: 1,
									// 	type:"1week"
									// },
									// {
									// 	value: "1M",
									// 	period: "1M",
									// 	text: "1月",
									// 	chartType: 1,
									// 	type:"1mon"
									// }
								];
								let btn = {};
								let nowTime = '';
								buttonArr.forEach((v, i) => {
									let button = widget.createButton({
										align: "left"
									});
									button.attr('title', v.text)
										.addClass("my2")
										.text(v.text);

									if (v.period == '1m') {
										button.css({
											'color': '#218bde',
											'border-bottom': '1px solid #218bde'
										});
										localStorage.setItem('tim', '1min'); //默认为1分钟
										localStorage.setItem('type', '1min'); //默认为1分钟
									}
									btn = button.on("click", function (e) {
										$(this).parents(".left").children()
											.find(".my2").removeAttr(
												"style"); //去掉1分钟的
										handleClick(e, v.value, v.type);

										widget.chart().setChartType(v
											.chartType); //改变K线类型
									});
								});
								if (localStorage.getItem('tim') == '1min') {
									widget.chart().setChartType(1);
								}
								let handleClick = (e, value, type) => {
									_this.setSymbol = function (symbol, value) {
										gh.chart().setSymbol(symbol, value);
									};
									localStorage.setItem('tim', value);
									localStorage.setItem('type', type); //默认为1分钟
									widget.chart().setResolution(value,
										function onReadyCallback() { }); //改变分辨率

									$(e.target)
										.addClass("mydate")
										.closest("div.space-single")
										.siblings("div.space-single")
										.find("div.button")
										.removeClass("mydate");
								};
							});
							_this.widget = widget;
						});
					},
					createFeed() {
						let this_vue = this;
						let Datafeed = {};
						Datafeed.DataPulseUpdater = function (datafeed, updateFrequency) {
							this._datafeed = datafeed;
							this._subscribers = {};

							this._requestsPending = 0;
							var that = this;

							var update = function () {
								if (that._requestsPending > 0) {
									return;
								}

								for (var listenerGUID in that._subscribers) {
									var subscriptionRecord = that._subscribers[listenerGUID];
									var resolution = subscriptionRecord.resolution;

									var datesRangeRight = parseInt((new Date().valueOf()) / 1000);


									//	BEWARE: please note we really need 2 bars, not the only last one
									//	see the explanation below. `10` is the `large enough` value to work around holidays
									var datesRangeLeft = datesRangeRight - that.periodLengthSeconds(
										resolution, 1);

									that._requestsPending++;

									(function (_subscriptionRecord) { // eslint-disable-line
										that._datafeed.getBars(_subscriptionRecord.symbolInfo,
											resolution, datesRangeLeft, datesRangeRight,
											function (bars) {
												that._requestsPending--;

												//	means the subscription was cancelled while waiting for data
												if (!that._subscribers.hasOwnProperty(
													listenerGUID)) {
													return;
												}

												if (bars.length === 0) {
													return;
												}

												var lastBar = bars[bars.length - 1];
												if (!isNaN(_subscriptionRecord
													.lastBarTime) && lastBar.time <
													_subscriptionRecord.lastBarTime) {
													return;
												}

												var subscribers = _subscriptionRecord
													.listeners;

												//	BEWARE: this one isn't working when first update comes and this update makes a new bar. In this case
												//	_subscriptionRecord.lastBarTime = NaN
												var isNewBar = !isNaN(_subscriptionRecord
													.lastBarTime) && lastBar.time >
													_subscriptionRecord.lastBarTime;

												//	Pulse updating may miss some trades data (ie, if pulse period = 10 secods and new bar is started 5 seconds later after the last update, the
												//	old bar's last 5 seconds trades will be lost). Thus, at fist we should broadcast old bar updates when it's ready.
												if (isNewBar) {
													if (bars.length < 2) {
														throw new Error(
															'Not enough bars in history for proper pulse update. Need at least 2.'
														);
													}

													var previousBar = bars[bars.length - 2];
													for (var i = 0; i < subscribers
														.length; ++i) {
														subscribers[i](previousBar);
													}
												}

												_subscriptionRecord.lastBarTime = lastBar
													.time;

												for (var i = 0; i < subscribers.length; ++
													i) {
													subscribers[i](lastBar);
												}
											},

											//	on error
											function () {
												that._requestsPending--;
											});
									})(subscriptionRecord);
								}
							};

							if (typeof updateFrequency != 'undefined' && updateFrequency > 0) {
								setInterval(update, updateFrequency);
							}
						};

						Datafeed.DataPulseUpdater.prototype.periodLengthSeconds = function (resolution,
							requiredPeriodsCount) {
							var daysCount = 0;

							if (resolution === 'D') {
								daysCount = requiredPeriodsCount;
							} else if (resolution === 'M') {
								daysCount = 31 * requiredPeriodsCount;
							} else if (resolution === 'W') {
								daysCount = 7 * requiredPeriodsCount;
							} else {
								daysCount = requiredPeriodsCount * resolution / (24 * 60);
							}

							return daysCount * 24 * 60 * 60;
						};

						Datafeed.DataPulseUpdater.prototype.subscribeDataListener = function (symbolInfo,
							resolution, newDataCallback,
							listenerGUID) {
							this._datafeed._logMessage('Subscribing ' + listenerGUID);

							if (!this._subscribers.hasOwnProperty(listenerGUID)) {
								this._subscribers[listenerGUID] = {
									symbolInfo: symbolInfo,
									resolution: resolution,
									lastBarTime: NaN,
									listeners: []
								};
							}

							this._subscribers[listenerGUID].listeners.push(newDataCallback);
						};

						Datafeed.DataPulseUpdater.prototype.unsubscribeDataListener = function (
							listenerGUID) {
							this._datafeed._logMessage('Unsubscribing ' + listenerGUID);
							delete this._subscribers[listenerGUID];
						};

						Datafeed.Container = function (updateFrequency) {
							this._configuration = {
								supports_search: false,
								supports_group_request: false,
								supported_resolutions: ['1', '5', '15', '30', '60', '120', '240',
									'360', '720', '1D', '3D', '1W', '1M'
								],
								supports_marks: true,
								supports_timescale_marks: true,
								exchanges: ['gh']
							};

							this._barsPulseUpdater = new Datafeed.DataPulseUpdater(this,
								updateFrequency || 10 * 1000);
							// this._quotesPulseUpdater = new Datafeed.QuotesPulseUpdater(this);

							this._enableLogging = true;
							this._callbacks = {};

							this._initializationFinished = true;
							this._fireEvent('initialized');
							this._fireEvent('configuration_ready');
						};

						Datafeed.Container.prototype._fireEvent = function (event, argument) {
							if (this._callbacks.hasOwnProperty(event)) {
								var callbacksChain = this._callbacks[event];
								for (var i = 0; i < callbacksChain.length; ++i) {
									callbacksChain[i](argument);
								}

								this._callbacks[event] = [];
							}
						};

						Datafeed.Container.prototype._logMessage = function (message) {
							if (this._enableLogging) {
								var now = new Date();


							}
						};

						Datafeed.Container.prototype.on = function (event, callback) {
							if (!this._callbacks.hasOwnProperty(event)) {
								this._callbacks[event] = [];
							}

							this._callbacks[event].push(callback);
							return this;
						};

						Datafeed.Container.prototype.onReady = function (callback) {
							let that = this;
							if (this._configuration) {
								setTimeout(function () {
									callback(that._configuration);
								}, 0);
							} else {
								this.on('configuration_ready', function () {
									callback(that._configuration);
								});
							}
						};

						Datafeed.Container.prototype.resolveSymbol = function (symbolName,
							onSymbolResolvedCallback,
							onResolveErrorCallback) {
							this._logMessage("GOWNO :: resolve symbol " + symbolName);
							Promise.resolve().then(() => {


								//this._logMessage("GOWNO :: onResultReady inject "+'AAPL');
								onSymbolResolvedCallback({
									"name": this_vue.symbol,
									"timezone": "Asia/Shanghai",
									"pricescale": this_vue.priceScale,
									"minmov": 1, //minmov(最小波动), pricescale(价格精度), minmove2, fractional(分数)
									"minmov2": 0, //这是一个神奇的数字来格式化复杂情况下的价格。
									"ticker": this_vue.symbol,
									"description": "",
									"type": "bitcoin",
									"volume_precision": 8,
									// "exchange-traded": "sdt",
									// "exchange-listed": "sdt",
									//现在，这两个字段都为某个交易所的略称。将被显示在图表的图例中，以表示此商品。目前此字段不用于其他目的。
									"has_intraday": true,
									"has_weekly_and_monthly": true,
									"has_no_volume": false, //布尔表示商品是否拥有成交量数据。
									'session': '24x7',
									'supported_resolutions': ['1', '3', '5', '15', '30',
										'60', '120', '240', '360', '720', '1D', '3D',
										'1W',
										'1M'
									]

								});
							});
						};


						//初始化数据
						Datafeed.Container.prototype.getBars = function (symbolInfo, resolution,
							rangeStartDate, rangeEndDate,
							onHistoryCallback, onErrorCallback) {
							// if (rangeStartDate > 0 && (rangeStartDate + '').length > 10) {
							//   throw new Error(['Got a JS time instead of Unix one.', rangeStartDate, rangeEndDate]);
							// }
							if (resolution.indexOf('D') == -1 && resolution.indexOf('W') == -1 &&
								resolution.indexOf('M') == -1) {
								resolution = resolution + 'min';
							} else if (resolution.indexOf('D') != -1) {
								resolution = resolution.replace('D', 'day');
							} else if (resolution.indexOf('W') != -1) {
								resolution = resolution.replace('W', 'week') + 'week';
							} else if (resolution.indexOf('M') != -1) {
								resolution = resolution.replace('M', 'mon') + 'mon';
							}
							this_vue.resolutionStr = resolution;
							initData({
								url: 'common/huobiTicket',
								data: {
									type: this_vue.type
								},
								type: 'post'
							}, (res) => {
								var filtered = res.filter(function (element) {
									return element.symbol == this_vue.symbol;
								});
								if (filtered) {
									this_vue.newprice = filtered[0].close;
									this_vue.maxprice = filtered[0].high;
									this_vue.minprice = filtered[0].low;
									this_vue.dayvom = Number(filtered[0].amount).toFixed(4);
									this_vue.usdtRate = (Number(filtered[0].close) / Number(filtered[0].cny)).toFixed(5);
									this_vue.usdtValue = filtered[0].cny;
									this_vue.updown = filtered[0].rose + '';
								}
							});
							initData({
								url: 'common/kline',
								data: {
									symbol: symbolInfo.name,
									// type: this_vue.type,
									type: 0,
									period: resolution,
									size: 600
								},
								type: 'post'
							}, res => {
								if (res.length > 0) {
									if (this_vue.type == '1') {
										res.reverse();
									}
									res.forEach((item, i) => {
										item.open = Number(item.open);
										item.close = Number(item.close);
										item.high = Number(item.high);
										item.low = Number(item.low);
										// item.reNum = Number(translatedInfo.high) - mber(translatedInfo.low);
										if (item.vol == 0) {
											item.volume = Number(item.amount);
										} else {
											item.volume = Number(item.vol);
										}
										item.time = (Number(item.id) * 1000),
											this_vue.newprice = item.close - 0;

										this_vue.usdtValue = (Number(this_vue.newprice) / Number(this_vue.usdtRate)).toFixed(5);
									});
									//res = res.reverse()
									this_vue.timeId = res[0].close;
									onHistoryCallback(res);
									onHistoryCallback([], {
										noData: true
									});

								}
								if (res && res.length == 0) {
									onHistoryCallback([], {
										noData: true
									});
								}
							});
						};
						//实时数据
						Datafeed.Container.prototype.subscribeBars = function (symbolInfo, resolution,
							onRealtimeCallback, listenerGUID,
							onResetCacheNeededCallback) {

							this_vue.getCompleteList2 = setInterval(function () {
								this_vue.connect(onRealtimeCallback);
							}, 2000);
						};

						Datafeed.Container.prototype.unsubscribeBars = function (listenerGUID) {
							this._barsPulseUpdater.unsubscribeDataListener(listenerGUID);
							clearInterval(this_vue.getCompleteList2);

						};

						return new Datafeed.Container;
					},

					updateWidget(item) {
						this.symbolInfo = {
							name: item,
							ticker: item,
							description: "",
							session: "24x7",
							supported_resolutions: ['1', '5', '30', '60', '240', '1D', '3D', '1W', '1M'],
							has_intraday: true,
							has_daily: true,
							has_weekly_and_monthly: true,
							timezone: "UTC",
						};
						this.removeWidget();
						this.createWidget();
					},
					removeWidget() {
						if (this.widget) {
							this.widget.remove();
							this.widget = null;
						}
					},
					overrides() {
						let style = {
							up: "#53B987", //主窗的 绿色 K线
							down: "#EB4D5C", //主窗的 红色 K线
							bg: this.theme == 'dark' ? "#111d2f" : "#fff", //暗夜背景色下，主体K线框的背景颜色
							grid: "#51587d17", //主题窗口中间的横线
							grid2: "#51587d17", //主题窗口中间的竖线

							cross: "#4e5b85",
							border: "#4e5b85",
							text: "#61688A",
							areatop: "rgba(122, 152, 247, .1)",
							areadown: "rgba(122, 152, 247, .02)"
						};
						return {
							// 'volumePaneSize': "small", //large, medium, small, tiny
							'paneProperties.topMargin': '20',
							"scalesProperties.lineColor": style.bg,
							"scalesProperties.textColor": style.text,
							"paneProperties.background": style.bg, //改变背景色的重要代码
							"paneProperties.vertGridProperties.color": style.grid2,
							"paneProperties.horzGridProperties.color": style.grid,
							"paneProperties.crossHairProperties.color": style.cross,
							"paneProperties.legendProperties.showLegend": true,
							"paneProperties.legendProperties.showStudyArguments": true,
							"paneProperties.legendProperties.showStudyTitles": true,
							"paneProperties.legendProperties.showStudyValues": true,
							"paneProperties.legendProperties.showSeriesTitle": true,
							"paneProperties.legendProperties.showSeriesOHLC": true,
							"mainSeriesProperties.candleStyle.upColor": style.up,
							"mainSeriesProperties.candleStyle.downColor": style.down,
							"mainSeriesProperties.candleStyle.drawWick": true,
							"mainSeriesProperties.candleStyle.drawBorder": true,
							"mainSeriesProperties.candleStyle.borderColor": style.border,
							"mainSeriesProperties.candleStyle.borderUpColor": style.up,
							"mainSeriesProperties.candleStyle.borderDownColor": style.down,
							"mainSeriesProperties.candleStyle.wickUpColor": style.up,
							"mainSeriesProperties.candleStyle.wickDownColor": style.down,
							"mainSeriesProperties.candleStyle.barColorsOnPrevClose": false,
							"mainSeriesProperties.hollowCandleStyle.upColor": style.up,
							"mainSeriesProperties.hollowCandleStyle.downColor": style.down,

							"mainSeriesProperties.hollowCandleStyle.drawWick": true,
							"mainSeriesProperties.hollowCandleStyle.drawBorder": true,
							"mainSeriesProperties.hollowCandleStyle.borderColor": style.border,
							"mainSeriesProperties.hollowCandleStyle.borderUpColor": style.up,
							"mainSeriesProperties.hollowCandleStyle.borderDownColor": style.down,
							"mainSeriesProperties.hollowCandleStyle.wickColor": style.line,
							"mainSeriesProperties.haStyle.upColor": style.up,
							"mainSeriesProperties.haStyle.downColor": style.down,
							"mainSeriesProperties.haStyle.drawWick": true,
							"mainSeriesProperties.haStyle.drawBorder": true,
							"mainSeriesProperties.haStyle.borderColor": style.border,
							"mainSeriesProperties.haStyle.borderUpColor": style.up,
							"mainSeriesProperties.haStyle.borderDownColor": style.down,
							"mainSeriesProperties.haStyle.wickColor": style.border,
							"mainSeriesProperties.haStyle.barColorsOnPrevClose": false,
							"mainSeriesProperties.barStyle.upColor": style.up,
							"mainSeriesProperties.barStyle.downColor": style.down,
							"mainSeriesProperties.barStyle.barColorsOnPrevClose": false,
							"mainSeriesProperties.barStyle.dontDrawOpen": false,
							"mainSeriesProperties.lineStyle.color": style.border,
							"mainSeriesProperties.lineStyle.linewidth": 1,
							"mainSeriesProperties.lineStyle.priceSource": "close",
							"mainSeriesProperties.areaStyle.color1": style.areatop,
							"mainSeriesProperties.areaStyle.color2": style.areadown,
							"mainSeriesProperties.areaStyle.linecolor": style.borders,
							"mainSeriesProperties.areaStyle.linewidth": 1,
							"mainSeriesProperties.areaStyle.priceSource": "close"
						};
					},
					chose() {
						this.widget.setLanguage('en'); //设置语言
					}
				},
			});
		})
	</script>
</body>
<style>
	body {
		margin: 0;
		padding: 0;
		font-family: "Times New Roman", Times, serif;
		font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
	}

	.drakColor {
		color: #b2b4b9 !important;
	}

	.percenttd {
		position: absolute;
		top: 0;
		left: 0;
		width: 50%;
		right: 0;
		height: 100%;
		z-index: 0;
	}

	.percentDiv {
		position: absolute;
		right: 0;
		width: 40%;
		height: 100%;
		opacity: 0.2;
	}


	.chart-page :not(input):not(textarea):not(.selectable),
	.tv-profile .tags,
	.unselectable {
		background-color: #000;
	}

	.bfz3 {
		width: 33.33%;
		float: left;
	}

	.mt1020 {
		font-size: 12px;
	}

	.mt1021 {
		font-size: 6VW;
		font-weight: 700;
	}

	.mt1025 {
		font-size: 3.6VW;
		font-weight: 400;
	}

	.th15 {
		height: 4vw;
	}

	.twt15 {
		width: 4vw;
	}

	.bdb_blue35 {
		border-bottom: 1px solid #51587d30;
	}

	.plr20 {
		padding-left: 4vw;
		padding-right: 4vw;
	}

	.pt60 {
		padding-top: 16vw;
	}

	.mt1020 {
		font-size: 12px;
	}

	.tth15 {
		height: 5vw;
	}

	.ttwt15 {
		width: 5vw;
	}

	.plr102 {
		padding-left: 0px;
		padding-right: 0px;
	}

	.plr10 {
		padding-left: 10px;
		padding-right: 10px;
	}

	.blue5 {
		color: #737982;
		font-size: 12px;
	}

	.blue6 {
		color: #737982;
		font-size: 12px;
	}
</style>

</html>